<template>
  <div style="float: right">
    待排序数量
    <el-select style="width: 60px" v-model="lenRatioe" @change="onLenChange">
      <el-option
        v-for="item in [10, 20, 40, 80]"
        :key="item"
        :label="item"
        :value="item"
      ></el-option>
    </el-select>
    速度配置：
    <el-select style="width: 120px" v-model="speedRatioe" @change="onChange">
      <el-option
        v-for="item in lists"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
  </div>
  <use-quick></use-quick>
  <!-- <test-quick></test-quick> -->
  <use-shell></use-shell>
  <use-merge></use-merge>
</template>
<script setup lang="ts">
import { provide, ref } from 'vue';
import { useOption } from './stores/option';
import UseQuick from '@/views/Quick/UseQuick.vue';
import UseShell from '@/views/Shell/UseShell.vue';
import UseMerge from '@/views/Merge/UseMerge.vue';

const OPTION = useOption();
const lists = ref([
  { label: '特慢', value: 6 },
  { label: '慢', value: 5 },
  { label: '一般', value: 4 },
  { label: '快', value: 3 },
  { label: '特快', value: 2 },
  { label: '超快', value: 1 },
]);
const speedRatioe = ref(3);
const lenRatioe = ref(80);
const createArray = function (): number[] {
  const { length, duplicate } = OPTION;
  return duplicate
    ? Array.from({ length: length }).map(() => Math.floor(Math.random() * length) + 1)
    : Array.from({ length: length }, (v, k) => k + 1).sort(() => Math.random() - 0.5);
};
const origins = ref<number[]>(createArray());
provide('origins', origins);

const onChange = function () {
  OPTION.speed = 40 * Number(speedRatioe.value);
  console.log(OPTION.speed);
};
const onLenChange = function () {
  OPTION.length = Number(lenRatioe.value);
  origins.value = createArray();
};
</script>

<style scoped></style>
